<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<!-- 引入公共meta -->
<jsp:include page="/static/iframe/import/_meta.jsp"></jsp:include>
<jsp:include page="/static/iframe/import/_header.jsp"></jsp:include>
<title>角色管理</title>
<link rel="stylesheet" href="static/iframe/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="static/iframe/bootstrap/bootstrap-table/css/bootstrap-table.min.css"/>
<link rel="stylesheet" href="static/iframe/bootstrap/css/bootstrap-theme.min.css">
<style type="text/css">
.fixed-table-body {
	height: auto;
}

.btn-group-vertical>.btn, .btn-group>.btn {
	height: 35px;
}

a:hover {
	text-decoration: none;
}
#toolbarDiv{
position:relative;bottom:-16px;
}
#toolbar{
position:relative;
}
.layui-breadcrumb a{
vertical-align:middle;
}
.fixed-table-toolbar .columns label input{
 vertical-align:text-bottom;
 margin:0px;
}
</style>
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb" style="visibility: visible;"><a> <cite> 
			首页<span class="layui-box">&gt;</span></cite></a> <a> <cite> 
			系统管理<span class="layui-box">&gt;</span></cite></a>  <a>
				<cite>角色管理</cite>
		</a>
		</span> <a class="btn btn-sm btn-success"
			style="line-height: 1.6em; margin-top:2px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="glyphicon glyphicon-refresh" style="line-height:20px"></i></a>
	</div>
	<div class="x-body">
		<div class="page-container">
				<div align="center">
					<div class="row">
						<form class="form-horizontal" onkeydown="if(event.keyCode==13)return false;">
							<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2 col-md-offset-2 col-lg-offset-2  col-sm-offset-1  col-xs-offset-1">
							</div>
							  <div class="col-md-4 col-lg-4 col-sm-6 col-xs-6" >
							   	<div class="row">
							   	<div class="col-md-3 col-lg-3 col-sm-3 col-xs-3" style="padding:0px;">
						  		 <select id="queryType" class="form-control " data-live-search="false">
										   <option value="NameOrCode">请选择</option>
										   <option value="roleName">角色名</option>
										   <option value="roleCode">角色code</option>
								   </select>
								   </div>
								    <div class="col-md-9 col-lg-9 col-sm-9 col-xs-9" style="padding:0px;">
								   <input  type="hidden"  name="type"  id="type" value="NameOrCode">
							       <div class="input-group">
								      <input type="text" id="roleName" class="form-control" placeholder="输入角色名称,code"/>
								      <span class="input-group-btn">
								        <button class="btn btn-success" type="button" id="search"><i class="glyphicon glyphicon-search"></i> 查询</button>
								      </span>
								    </div>
								    </div>
								 </div>
						  	</div><!-- /.col-lg-6 -->
						  </form>
					</div>
				</div>
				
				<div id="toolbar">
					 <div id="toolbarDiv">
						<a href="javascript:;" onclick="batchdel()" class="btn btn-danger btn-sm">	
							<span class="glyphicon glyphicon-trash"></span>
							批量删除
						</a>
						<a class="btn btn-primary btn-sm" href="javascript:;"
						           onclick="role_add('添加角色','sys/role/add','520','320')">
							<span class="glyphicon glyphicon-plus"></span>
						   	添加
					    </a>
				    </div>
				</div>
			<div>
				<table id="roleTable" class="table table-hover"  style="white-space: nowrap;"
						data-pagination="true" data-checkbox-header="true"
						data-toolbar="#toolbar" data-show-refresh="true"
						data-content-type="application/x-www-form-urlencoded"
						data-response-handler="responseHandler"
						data-showColumns="true" data-undefined-text=" ">
					<thead>
						<tr>
							<th data-checkbox="true" data-field="state" data-align="center"></th>
							<th data-width="50"  data-align="center"  data-field="id" data-sortable="true">编号</th>
							<th data-width="100" data-align="center"  data-field="roleName" data-sortable="true">角色名称</th>
							<th data-width="100" data-align="center" data-field="roleCode" data-sortable="true">角色code</th>
							<th data-width="100"  data-align="center" data-field="description">描述</th>
							<th data-width="50"  data-align="center" data-formatter="actionFormatter">相关操作</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
		        </table>
		    </div>
		</div>
	</div>
<%-- <jsp:include page="/static/iframe/import/_footer.jsp"></jsp:include> --%>
<script type="text/javascript" src="static/plugins/jq/jquery-3.2.1.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/iframe/x-admin/lib/layer/layer.js"></script>
<script type="text/javascript" src="static/plugins/window/layershow.js"></script>
<script type="text/javascript" src="static/plugins/window/referparent.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-table/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="static/iframe/bootstrap/bootstrap-table/js/lodash.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	//调用函数，初始化表格  
	initTable();
	//当点击查询按钮的时候执行  
	$("#search").bind("click", initTable);
});
$(function(){ 
	$(document).keydown(function(event){ 
	if(event.keyCode==13){ 
		initTable();
	} 
}); 
}); 

function initTable() {
	//先销毁表格  
	$('#roleTable').bootstrapTable('destroy');
	//初始化表格,动态从服务器加载数据  
	$("#roleTable").bootstrapTable({
		method : "post", //使用请求到服务器获取数据  
		url : "role/tableView", //获取数据的Servlet地址  
		dataType : "json",
		striped : true, //表格显示条纹  
		pagination : true, //启动分页  
		pageNumber : 1, //初始化加载第一页，默认第一页
		pageSize : 5, //每页的记录行数（*）
		pageList: [5, 10, 15, 20, 25], //记录数可选列表  
		search : false, //是否启用查询  
		showColumns : true, //显示下拉框勾选要显示的列  
		showRefresh : true, //显示刷新按钮 
		maintainSelected : true,   //如果是客户端分页，这个设为 true 翻页后已经选中的复选框不会丢失 
		clickToSelect : true, //是否启用点击选中行
		sidePagination : "server", //表示服务端请求  
		paginationLoop : false,
		//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
		//设置为limit可以获取limit, offset, search, sort, order  
		queryParamsType : "limit",
		queryParams : function queryParams(params) { //设置查询参数  
			var param = {
				offset : params.offset,
				limit : params.limit,
				sort : params.sort,
				order : params.order,
				content : $("#roleName").val(),
				type:$("#type").val()
			};
			return param;
		},
		icons : {
			refresh : 'glyphicon-repeat',
			toggle : 'glyphicon-list-alt',
			columns : 'glyphicon-list'
		},
		onLoadError : function() { //加载失败时执行  
			layer.msg("加载数据失败", {
				time : 1500,
				icon : 2
			});
		}
	});
}
//记住复选框
var $table = $('#roleTable'),selections = [];
$(function () {
	$table.on('check.bs.table check-all.bs.table ' +
        'uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
    var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
            return row.id;
        }),
    func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
    selections = _[func](selections, ids);
  });
});

function responseHandler(res) {
	$.each(res.rows, function (i, row) {
	    row.state = $.inArray(row.id, selections) !== -1;
	});
	return res;
}
//表格-操作 - 格式化   value: 所在column的当前显示值，row:整个行的数据 ，对象化，可通过.获取 index 所在行索引
function actionFormatter(value, row, index) {
	var str = '&nbsp;&nbsp;&nbsp;&nbsp;';
	if(row.deleteStatus==1){
		str = "&nbsp;&nbsp;&nbsp;已删除无操作";
	}else{
		str += "<a title='编辑' href='javascript:;' onclick=role_edit('编辑','role/selecRoletById/"+ row.id + "','550','330')  style='text-decoration:none'><i class='glyphicon glyphicon-edit'></i></a>"
		str += "&nbsp;&nbsp;&nbsp;&nbsp;";
		str += "<a title='删除' href='javascript:;' onclick=role_del(this,'"+ row.id + "') class='ml-5' style='text-decoration:none'><i class='glyphicon glyphicon-trash'></i></a>"
		str += '&nbsp;&nbsp;&nbsp;&nbsp;';
		str += "<a title='授权' href='javascript:;' onclick=role_grant('授权','role/selectRoleGrant/"+ row.id + "','300','350')  style='text-decoration:none'><i class='glyphicon glyphicon-user'></i></a>"
		str += "&nbsp;&nbsp;&nbsp;&nbsp;"
	}
		return str;
}
//批量删除
function batchdel(){
	//var row = $.map($("#roleTable").bootstrapTable('getSelections'),function(row){return row});
	var row = selections;
	console.info(row);
	//row 是数组
	/* for (var i = 0; i < row.length; i++) {
		console.log(row[i].字段名);
	} */
	 var ids = "";
	 for (var i = 0; i < row.length; i++) {
		if(i==0 || i=="0"){
			ids += row[i];
		}else{
			ids += ","+row[i];
		}
	}
	 console.info(ids);
	if(ids==""){
		//透明弹出层
		layer.msg('请选择!', {
			icon : 2,
			time : 1000
		});
	}else{
		layer.confirm('确认要删除吗?',{btn : [ '确定', '取消' ]}, function(index) {
			$.ajax({
				type : 'post',
				url : 'role/batchdelete/'+ids,
				dataType : 'json',
				success : function(result) {
					if (result.flag) {
						//$(obj).parents("tr").remove();
						layer.msg('已删除!', {
							icon : 1,
							time : 1000
						});
						setTimeout(referPage, 1000);
					} else {
						layer.msg(result.msg, {
							icon : 2,
							time : 1000
						});
						//刷新 
						$("#roleTable").bootstrapTable('refresh', {
							url : 'role/tableView'
						});
					}
				},
				error : function(data) {
					console.log(data.msg);
				},
			});
		});
	}
	 
}
//添加
function role_add(title, url, w, h) {
	layer_show(title, url, w, h);
}
//编辑
function role_edit(title, url, w, h){
	layer_show(title, url, w, h);
}
//管理员才能删除
function role_del(obj,id){
	layer.confirm('确认要删除吗(Are you sure)?',{btn : [ '确定', '取消' ]}, function(index) {
		$.ajax({
			type : 'post',
			url : 'role/delete/'+id,
			dataType : 'json',
			success : function(result) {
				if (result.flag) {
					//$(obj).parents("tr").remove();
					layer.msg('已删除!', {
						icon : 1,
						time : 1000
					});
					//刷新 
					$("#roleTable").bootstrapTable('refresh', {
						url : 'role/tableView'
					});
				} else {
					layer.msg(data.msg, {
						icon : 2,
						time : 1000
					});
				}
			},
			error : function(data) {
				console.log(data.msg);
			},
		});
	});
}
//授权
function role_grant(title, url, w, h){
	layer_show(title, url, w, h);
}
//选择条件查询
$(document).ready(function () {
	//n 是事件  
	$("#queryType").bind("change",function(n,o){
		console.info(this.value);
		$("#type").val(this.value);
		if(this.value==""){
			$("#roleName").val('');
		}
	})
});
</script>
</body>
<!-- 引入x-admin公共js -->
<%-- <jsp:include page="/static/iframe/import/_footer.jsp"></jsp:include> --%>
<%-- <jsp:include page="/static/iframe/import/_footer.jsp"></jsp:include> --%>
</html>